import React, {Component}  from 'react';
import {DatePicker, Row, Col,Button} from 'antd';
//import enUS from 'antd/lib/date-picker/locale/en_US';
//import moment from 'moment';


/**
 * 开始结束日期选择控件,含有快捷按钮的版本
 */
export default class DateRanger extends Component {


    /**
     * constructor - 构造函数,初始化开始结束时间和endOpen的state
     *
     * @param  {type} props description
     * @return {type}       description
     */
    constructor(props) {
        super(props)
        this.state = {
            startValue: null,
            endValue: null,
            endOpen: false,
        }
    }

    /**
     * 禁用开始日期
     */
    disabledStartDate = (startValue) => {
        const endValue = this.state.endValue;
        if (!startValue || !endValue) {
            return false;
        }
        return startValue.valueOf() > endValue.valueOf();
    }


    /**
     * 禁用结束日期
     */
    disabledEndDate = (endValue) => {
        const startValue = this.state.startValue;
        if (!endValue || !startValue) {
            return false;
        }
        return endValue.valueOf() < startValue.valueOf();
    }


    /**
     * 日期改变时,未使用
     */
    onChange = (field, value, dateStr) => {
        this.setState({
            [field]: value,
        });

       
    }

    /**
     * 开始日期改变未使用
     */
    onStartChange = (value, dateStr) => {
        this.onChange('startValue', value, dateStr);
    }


    /**
     * 结束日期改变未使用
     */
    onEndChange = (value, dateStr) => {
        this.onChange('endValue', value, dateStr);
    }


    /**
     * 处理选择开始日期时窗口的变化
     */
    handleStartOpenChange = (open) => {
        if (!open) {
            this.setState({endOpen: true});
        }
        if (this.props.onStartOpenChange) {
            this.props.onStartOpenChange(open)
        }
    }

    /**
     * 处理选择结束日期时窗体的变化
     */
    handleEndOpenChange = (open) => {
        this.setState({endOpen: open});
        if (this.props.onEndOpenChange) {
            this.props.onEndOpenChange(open)
        }
    }

    /**
     * componentDidMount - 初始化,从父组件传递过来的开始和结束设时间进行赋值
     *
     * @return {type}  description
     */
    componentDidMount() {

         const { startValue = null,endValue = null } = this.props;

         this.setState({
              startValue:startValue,
              endValue:endValue
         });

    }

    /**
     * componentWillReceiveProps - 当父组件传递给子组件的属性发生改变时触发,
     * 在这里要对本组件的开始结束时间的state进行处理,来重新渲染本子组件
     *
     * @param  {type} nextProps description
     * @return {type}           description
     */
    componentWillReceiveProps(nextProps){

         /**
          *更新开始时间的状态
          */
         if(this.props.startValue!==nextProps.startValue){
           this.setState({
                startValue:nextProps.startValue
           })
         }


         /**
          *更新结束时间的状态
          */
         if(this.props.endValue!==nextProps.endValue){
           this.setState({
                endValue:nextProps.endValue
           })
         }
    }



    /**
     * render - 渲染组件
     *
     * @return {type}  description
     */
    render() {
        const {startValue, endValue, endOpen} = this.state;
        return (
            <Row className={this.props.wrapClassName ? this.props.wrapClassName : ''}>
                <Col span={12}>
                    <DatePicker
                        //defaultValue={this.props.defaultValue[0]}
                        disabledDate={this.disabledStartDate}
                        showTime={!!this.props.showTime}
                        size={this.props.size}
                        disabled={!!this.props.disabled}
                        locale={this.props.locale}
                        format={this.props.formatter}
                        getCalendarContainer={
                            this.props.getCalendarContainer
                        }
                        value={this.state.startValue}
                        placeholder={this.props.startText}
                        onChange={this.props.onStartChange}
                        onOpenChange={this.handleStartOpenChange}
                        allowClear = {false}
                    />
                </Col>
                <Col span={12}>
                    <DatePicker
                        //defaultValue={this.props.defaultValue[1]}
                        disabledDate={this.disabledEndDate}
                        showTime={!!this.props.showTime}
                        size={this.props.size}
                        disabled={!!this.props.disabled}
                        locale={this.props.locale}
                        format={this.props.formatter}
                        getCalendarContainer={this.props.getCalendarContainer}
                        value={this.state.endValue}
                        placeholder={this.props.endText}
                        onChange={this.props.onEndChange}
                        open={endOpen}
                        onOpenChange={this.handleEndOpenChange}
                        allowClear = {false}
                    />
                </Col>

                {/* <Col span={8}>
                       <Button onClick={()=>{
                            this.setState({
                              startValue:moment(),
                              endValue:moment()
                            });
                       }}>今天</Button>
                       <Button onClick={()=>{
                            this.setState({
                              startValue:moment().subtract(1, 'days'),
                              endValue:moment().subtract(1, 'days')
                            });
                       }}>昨天</Button>
                       <Button onClick={()=>{
                            this.setState({
                              startValue:moment().subtract(7, 'days'),
                              endValue:moment()
                            });
                       }}>过去7天</Button>
                       <Button onClick={()=>{
                            this.setState({
                              startValue:moment().subtract(30, 'days'),
                              endValue:moment()
                            });
                       }}>过去30天</Button>
                       <Button onClick={()=>{
                            this.setState({
                              startValue:moment().startOf('month') ,
                              endValue:moment().endOf('month')
                            });
                       }}>本月</Button>
                       <Button onClick={()=>{
                            this.setState({
                              startValue:moment().startOf('month').subtract(1, 'months'),
                              endValue:moment().endOf('month').subtract(1, 'months')
                            });
                       }}>上月</Button>
                </Col> */}
            </Row>
        );
    }
}
